import { ref } from "vue"
import type { TableInstance } from 'element-plus'
import { type FormInstance, ElMessage, ElMessageBox } from "element-plus"
import { uploadUrl } from '@/api/common'
import uploadImage from '@/components/UploadImage/index.vue'

const useFile = (props: any)=> {
  const {fileType, maxSize} = props

  const beforeUpload = (file: any) => {
    let typePd
    if(fileType == 'image') {
      typePd = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp';
    } else if(fileType == 'video') {
      typePd = file.type === 'video/mp4' || file.type === 'video/webm';
    }
    const isLt = file.size / 1024 / 1024 < maxSize;
    if (!typePd) {
      ElMessage({
        message: '上传文件格式错误',
        type: 'warning',
      })
      return
    }
    if (!isLt) {
      ElMessage({
        message: `上传头像图片大小不能超过 ${maxSize}MB!`,
        type: 'warning',
      })
      return
    }
    return true
  }

  const beforeAvatarUpload=(file: any) =>  {
    const isLt5M = file.size / 1024 / 1024 < 30;
    if (!isLt5M) {
      ElMessage({
        message: `上传头像图片大小不能超过 ${maxSize}MB!`,
        type: 'warning',
      })
    }
    return isLt5M;
  }

  const handleExceed = (files: any, fileList:any)=>{
    if (fileList && fileList.length == 2) {
      ElMessage({
        message: `限制上传个数不超过2个`,
        type: 'warning',
      })
    }
  }


  const visibleImageUrl = ref<string>('')
  const showImgVisible = ref<boolean>(false)

  const handlePictureCardPreview = (uploadFile: any) =>{
    visibleImageUrl.value = uploadFile.url
    showImgVisible.value = true
  }

  return {
    beforeUpload,
    uploadUrl: uploadUrl(),
    handlePictureCardPreview,
    visibleImageUrl,
    showImgVisible,
    uploadImage,

    beforeAvatarUpload
  }
}

export default useFile
